import CodeView from '../../../shared/components/CodeView';
import CodeBlock from '../../../shared/components/CodeBlock';
import Example from '../../../shared/components/Example';
import Blockquote from '../../../shared/components/Blockquote';
import { SummaryDetail, SummaryDetailTitle, SummaryDetailContent, SummaryDetailAction } from '../summary-detail/base/example';
import SummaryDetailBase from '../summary-detail/base/example';
import SetupAssistantStepSummary from './SetupAssistantStepSummary';
import SetupAssistantStepDetail from './SetupAssistantStepDetail';
import SetupAssistant from './';
import { FullSetupAssistantCard } from './';

<div className="doc lead">
  Setup Assistant provides Administrators with a centralized list of tasks for
  onboarding organizations, clouds, or features within the Salesforce Platform.
  It provides a prescriptive and detailed guide for learning, configuring, and
  importing data which can take hours to days.
</div>

<CodeView exampleOnly>
  <SetupAssistant isBase stepsHaveProgress />
</CodeView>

## About Setup Assistant

Actions in the assistant launch LSF (Lightning Setup Flow) or link to configuration pages, and may be accompanied by links to Trailheads, articles, Help & Training documentation, and videos.

- The title of the assistant should always end with “Setup Assistant” (e.g. Einstein Setup Assistant).
- Use links to navigate to Trailheads, articles, Help & Training documentation, and videos.
- Use the Outline Brand Button to open LSF or configuration pages.
- Estimated time is optional.

## Base

Basic list of learning and task links that do not require progress tracking and do not have sequential steps.

<Example title="Setup Assistant Base">
  <CodeView>
    <SetupAssistant isBase />
  </CodeView>
</Example>

## With Step Progress

List of learning and task links with a recommended sequence that require progress tracking. Depending on the platform, completion checking will be through an API or a link click. The progress markers use the [Progress Ring](../progress-ring) component.

<Example title="Setup Assistant Base steps with Progress">
  <CodeView>
    <SetupAssistant isBase stepsHaveProgress />
  </CodeView>
</Example>

## Hub with Expandable Steps

Includes all the features of Setup Assistant Base + Progress, but also includes substeps that require sequential completion within the primary step. Inline Text within each primary step is optional.

Clicking on the icon toggle or the primary step's title will open and close that step's details. If a primary step's substeps have been started, the primary step's progress ring turns blue to indicate the amount of progress made on the substeps.

<Blockquote type="a11y" header="Accessibility Note">
  <p>
    Since both the chevron toggle and the step's title act as a trigger to open
    and close the step's detail, ensure both the icon button and the title include
    {' '}<code>aria-controls=[uniqueId]</code> where the <code>uniqueId</code> matches the {' '}<code>id</code> on the
    {' '}<code>&lt;div&gt;</code> with <code>class="slds-summary-detail__content"</code>.
  </p>
</Blockquote>

<Example title="Setup Assistant Hub Expandable">
  <CodeView>
    <SetupAssistant stepsAreExpandable />
  </CodeView>
</Example>

## In a Card

If the steps have associated progress, a header is added to the card containing the steps. This header indicates overall progress on this Setup Assistant and utilizes the [Descriptive Progress Bar](../progress-bar)

<Blockquote type="a11y" header="Accessibility Note">
  <p>
    In order to prevent duplicating information for screen reader users, the
    percentage info on the top of the progress bar is hidden using the
    {' '}<code>slds-assistive-text</code> class.
  </p>
</Blockquote>

<Example title="Setup Assistant Hub Expandable">
  <CodeView>
    <FullSetupAssistantCard>
      <SetupAssistant stepsAreExpandable />
    </FullSetupAssistantCard>
  </CodeView>
</Example>
